import * as React from 'react';
import classNames from 'classnames';

export interface CardProps {
	children?: React.ReactNode;
	className?: string;
	title?: string;
	bordered?: boolean;
	extra?: React.ReactNode;
	style?: React.CSSProperties;
}

const Card: React.FC<CardProps> = props => {
	const prefixCls = 'bh-card';
	const {
		children,
		className,
		title,
		bordered = true,
		extra,
		style,
		...restProps
	} = props;
	const hasTitle = !!title;
	const classString = classNames(
		prefixCls,
		className,
		{
			[`${prefixCls}-bordered`]: bordered,
		}
	);

	return (
		<div {...restProps} className={classString} style={style}>
		    {hasTitle && (<div className="bh-card-head">
		    	<div className="bh-card-head-wrapper">
		    		<div className="bh-card-head-title">{title}</div>
		    		<div className="bh-card-extra">{extra}</div>
		    	</div>
		    </div>)}
		    <div className="bh-card-body">{children}</div>
		</div>
	)
};

export default Card;